<template>
    <div>
        <!-- 字符串类型 -->
        <el-input v-if="type == 0" v-model="innerValue" clearable :placeholder="placeholder" />

        <!-- 数值类型 -->
        <el-input-number v-else-if="type == 1" v-model="innerValue" :min="min" :max="max" controls-position="right"
            :placeholder="placeholder" />

        <!-- 布尔类型 -->
        <!-- <el-switch v-else-if="type == 2" v-model="innerValue" active-color="#13ce66" inactive-color="#ff4949"
            :placeholder="placeholder" /> -->
        <!-- 布尔类型 -->
        <el-radio-group v-else-if="type == 2" v-model="innerValue" :placeholder="placeholder">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
        </el-radio-group>


        <!-- 默认情况，如果传入的类型不支持 -->
        <p v-else>Unsupported type</p>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// 定义 props
const props = defineProps({
    type: {
        type: Number,
        required: true,
        validator: value => [0, 1, 2].includes(value) // 0=字符串, 1=数值, 2=布尔
    },
    value: {
        type: String, // 外部传入的值是字符串类型
        default: ''
        // required: true
    },
    min: {
        type: Number,
        default: 0
    },
    max: {
        type: Number,
        default: 100
    },
    placeholder: {
        type: String,
        default: undefined
    }
});
console.log(props)

// 定义 emit
const emit = defineEmits(['update:value']);

// 内部状态
const innerValue = ref(null);

// 将字符串类型的值转换为正确的类型
function parseValue(value, type) {
    if (type == 1) { // 数值类型
        return isNaN(Number(value)) ? 0 : Number(value);
    } else if (type == 2) { // 布尔类型
        return value == 'true';
    } else {
        return value; // 字符串类型直接返回
    }
}

// 监听父组件传入的 value 属性变化，并进行类型转换
watch(
    () => props.value,
    (newValue) => {
        innerValue.value = parseValue(newValue, props.type);
    },
    { immediate: true } // 初始化时立即执行
);

// 监听内部值的变化，向父组件同步更新
watch(innerValue, (newValue) => {
    emit('update:value', String(newValue)); // 确保返回的值是字符串类型
});
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>